<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>量表预览 - {{ scale.title }}</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/bootstrap-icons.css') }}" rel="stylesheet">
    <style>
        .preview-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 0;
        }
        .question-card {
            border-left: 4px solid #007bff;
            margin-bottom: 1.5rem;
        }
        .option-item {
            padding: 0.5rem 1rem;
            margin: 0.25rem 0;
            background: #f8f9fa;
            border-radius: 0.375rem;
            border: 1px solid #dee2e6;
        }
        .option-item:hover {
            background: #e9ecef;
        }
        .question-number {
            background: #007bff;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 1rem;
        }
        .scale-info {
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }
    </style>
</head>
<body class="bg-light">
    <!-- 预览头部 -->
    <div class="preview-header">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h1 class="mb-2">{{ scale.title }}</h1>
                            {% if scale.subtitle %}
                            <p class="mb-0 opacity-75">{{ scale.subtitle }}</p>
                            {% endif %}
                        </div>
                        <div class="text-end">
                            <span class="badge bg-light text-dark fs-6">预览模式</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="container my-4">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <!-- 量表信息 -->
                <div class="scale-info p-4 mb-4">
                    <div class="row">
                        <div class="col-md-6">
                            <h5 class="text-primary mb-3">
                                <i class="bi bi-info-circle me-2"></i>量表信息
                            </h5>
                            {% if scale.description %}
                            <p class="mb-2"><strong>描述：</strong>{{ scale.description }}</p>
                            {% endif %}
                            {% if scale.instruction %}
                            <p class="mb-2"><strong>说明：</strong>{{ scale.instruction }}</p>
                            {% endif %}
                            {% if scale.author %}
                            <p class="mb-2"><strong>作者：</strong>{{ scale.author }}</p>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <div class="text-md-end">
                                <p class="mb-2"><strong>题目数量：</strong><span class="text-primary">{{ scale.question_count }}</span> 题</p>
                                {% if scale.estimated_time %}
                                <p class="mb-2"><strong>预计用时：</strong>{{ scale.estimated_time }} 分钟</p>
                                {% endif %}
                                <p class="mb-2"><strong>版本：</strong>{{ scale.version }}</p>
                                <p class="mb-0">
                                    <span class="badge bg-{{ 'success' if scale.is_free else 'warning' }}">
                                        {{ '免费' if scale.is_free else '付费' }}
                                    </span>
                                    {% if not scale.is_free %}
                                    <span class="text-muted ms-2">¥{{ scale.price }}</span>
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 题目预览 -->
                <div class="bg-white p-4 rounded">
                    <h5 class="text-primary mb-4">
                        <i class="bi bi-list-ol me-2"></i>题目预览
                    </h5>
                    <div id="questions-container">
                        <!-- 题目将通过JavaScript加载 -->
                        <div class="text-center py-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                            <p class="mt-2 text-muted">正在加载题目...</p>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="text-center mt-4">
                    <button type="button" class="btn btn-secondary me-2" onclick="window.close()">
                        <i class="bi bi-x-lg me-1"></i>关闭预览
                    </button>
                    <a href="/scales/{{ scale.id }}/assessment" class="btn btn-primary" target="_blank">
                        <i class="bi bi-play-fill me-1"></i>开始测评
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    
    <script>
        var scaleId = {{ scale_id|tojson }};
        
        // 页面加载完成后获取题目数据
        document.addEventListener('DOMContentLoaded', function() {
            loadQuestions();
        });
        
        // 加载题目
        function loadQuestions() {
            fetch('/api/scales/' + scaleId + '/preview', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                if (data.success) {
                    renderQuestions(data.data.questions);
                } else {
                    showError('加载题目失败: ' + data.message);
                }
            })
            .catch(function(error) {
                console.error('加载题目失败:', error);
                showError('加载题目失败，请稍后重试');
            });
        }
        
        // 渲染题目
        function renderQuestions(questions) {
            var container = document.getElementById('questions-container');
            
            if (!questions || questions.length === 0) {
                container.innerHTML = '<p class="text-muted text-center py-4">暂无题目</p>';
                return;
            }
            
            var html = '';
            questions.forEach(function(question) {
                html += '<div class="question-card card mb-3">';
                html += '<div class="card-body">';
                html += '<div class="d-flex align-items-start mb-3">';
                html += '<div class="question-number">' + question.question_number + '</div>';
                html += '<div class="flex-grow-1">';
                html += '<h6 class="mb-2">' + question.question_text + '</h6>';
                html += '<small class="text-muted">';
                html += '类型: ' + getQuestionTypeText(question.question_type);
                html += (question.is_required ? ' | 必答' : ' | 选答');
                html += '</small>';
                html += '</div>';
                html += '</div>';
                
                if (question.options && question.options.length > 0) {
                    html += '<div class="options">';
                    question.options.forEach(function(option) {
                        html += '<div class="option-item">';
                        html += '<span class="option-key badge bg-secondary me-2">' + option.option_key + '</span>';
                        html += option.option_text;
                        html += '</div>';
                    });
                    html += '</div>';
                }
                
                html += '</div>';
                html += '</div>';
            });
            
            container.innerHTML = html;
        }
        
        // 获取题目类型文本
        function getQuestionTypeText(type) {
            var types = {
                'single': '单选题',
                'multiple': '多选题',
                'text': '文本题',
                'scale': '量表题'
            };
            return types[type] || type;
        }
        
        // 显示错误信息
        function showError(message) {
            var container = document.getElementById('questions-container');
            container.innerHTML = '<div class="alert alert-danger text-center" role="alert">' +
                '<i class="bi bi-exclamation-triangle me-2"></i>' +
                message +
                '</div>';
        }
    </script>
</body>
</html>